<template>
	<block v-if="weeks.length>1">
		<view class="hxt-flex padding-sm bg-white">
			<view @click="!prevMonth.disabled&&goto(0,prevMonth.date)"
				:class="[prevMonth.disabled?'color-gray':'color-blue']">
				<van-icon name="arrow-left"></van-icon>
				{{prevMonth.m}}
			</view>
			<view class="hxt-flex-fill text-center">
				<text class="bold">{{currentMonth.m}}</text>
				<van-icon name="location-o" class="color-blue" @click="goto(1,currentMonth.date)">今天</van-icon>
				</div>
			</view>
			<view :class="[nextMonth.disabled?'color-gray':'color-blue']"
				@click="!nextMonth.disabled&&goto(2,nextMonth.date)">
				{{nextMonth.m}}
				<van-icon name="arrow"></van-icon>
			</view>
		</view>
		<view class="hxt-flex bg-light">
			<view class="hxt-flex-fill">
				<van-grid :column-num="7" class="bg-light">
					<van-grid-item v-for="w in weekTitles" :key="w" :text="w" content-class="weekTitles" use-slot>
						<view class="bold color-blue">{{w}}</view>
					</van-grid-item>
				</van-grid>
			</view>
		</view>
		<view class="hxt-flex bg-white">
			<swiper style="width: 100%;height: 96rpx;" :indicator-dots="false" :autoplay="false" :current="current"
				:touchable="true">
				<swiper-item v-for="(item,index) in weeks" :key="index">
					<van-grid clickable :column-num="7" :border="false" class="contentGrid">
						<van-grid-item v-for="(it,idx) in item.list" :key="idx"
							:content-class="[it.date==date?'custom-grid-item':!!it.IsNew?'custom-IsNew':'']"
							@click="!!it&&!!it.date&&changeSelected(it)" use-slot dot badge="课" :text="it.day">
							<view v-if="list.find(function (item) { return item.aDate== it.date })"
								style="display: flex; position: absolute; font-size: 12px !important; color: #f37b1d !important; right: 5px; top:0;">
								课
							</view>
							<view class="bold">{{it.day}}</view>
						</van-grid-item>
					</van-grid>
				</swiper-item>
			</swiper>

		</view>
	</block>
</template>

<script>
	import hxt from "@/utils/hxt.js"
	export default {
		name: "hxt-weekcalendars",
		props: {
			value: {
				type: String,
				'default': function() {
					return hxt.dateFormat("yyyy-MM-dd");
				}
			},
			list: {
				type: Array,
				'default': function() {
					return [];
				}

			},
		},
		data() {
			return {
				weekTitles: ['日', '一', '二', '三', '四', '五', '六'],
				weeks: [],
				current: 0,

			};
		},
		computed: {
			date: {
				get: function() {
					return hxt.dateFormat("yyyy-MM-dd", this.value);
				},
				set: function(val) {
					this.$emit('input', val);
				}
			},
			currentMonth: function() {
				return {
					m: hxt.dateFormat("yyyy年MM月", this.date),
					date: this.date,
				};
			},
			prevMonth: function() {
				return {
					m: hxt.dateFormat('M月', hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date))),
					date: hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date)),
					disabled: hxt.dateAdd('M', -6, hxt.dateFormat('yyyy-MM-dd')) > hxt.dateAdd('M', 0, this.date)
				};
			},
			nextMonth: function() {
				return {
					m: hxt.dateFormat('M月', hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date))),
					date: hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date)),
					disabled: hxt.dateAdd('M', +6, hxt.dateFormat('yyyy-MM-dd')) < hxt.dateAdd('M', 0, this.date)
				};
			}
		},
		mounted: function() {
			var _this = this;
			_this.weeks = _this.groupDates(hxt.dateConfig(_this.date));
			var idx = _this.weeks.findIndex(function(item) {
				return item.IsNew
			});
			_this.current = idx > 0 ? idx : 0;
		},
		methods: {
			weekSwipe: function(type) {
				var _this = this;
				if (type == 0) {
					if (_this.current == 0) return;
					_this.current -= 1;
				}
				if (type == 1) {
					if (_this.current >= _this.weeks.length - 1) return;
					_this.current += 1;
				}
			},
			groupDates: function(dateConfig) {
				var groups = [],
					_this = this,
					startDate = dateConfig.monthBegin,
					endDate = dateConfig.monthEnd,
					dateList = [];
				for (var i = 0; i < dateConfig.monthDays; i++) {
					dateList.push({
						date: hxt.dateFormat("yyyy-MM-dd", new Date(dateConfig.year, dateConfig.month - 1, i +
							1)),
						day: new Date(dateConfig.year, dateConfig.month - 1, i + 1).getDate(),
						IsNew: false
					});
				};
				startDate = hxt.toDate(startDate);
				endDate = hxt.toDate(endDate);
				while (startDate < endDate) {
					var group = [],day = startDate.getDay(),IsNew = false;
					for (var i = 0; i < 7; i++) {
						if (i < day) {
							group.push({});
							continue;
						};
						if (startDate <= endDate) {
							var obj = dateList.find(function(item) {
								return item.date == hxt.dateFormat("yyyy-MM-dd", startDate)
							});
							obj.IsNew = false;
							if (startDate.getTime() == hxt.toDate(hxt.dateFormat("yyyy-MM-dd")).getTime()) {
								obj.IsNew =true;
								IsNew = true;
							};
							group.push(obj);
							
							startDate.setDate(startDate.getDate() + 1);
						} else {
							group.push({});
						};
					};
					groups.push({
						list: group,
						IsNew: IsNew
					});
				};
				return groups;
			},
			goto: function(type, date) { //0上一月 1今天 2下一月
				var _this = this,date=type==1?hxt.dateFormat("yyyy-MM-dd"):hxt.dateFormat("yyyy-MM-dd", date);
				_this.date = date;
				_this.weeks = _this.groupDates(hxt.dateConfig(date));
				_this.$nextTick(function(){
					var idx = _this.weeks.findIndex(function(item) {
						return item.IsNew
					});
					_this.current = idx > 0 ? idx : 0;
				});
				_this.$emit('click', date);
			},
			changeSelected: function(g) {
				var _this = this;
				_this.date = g.date;
			}
		},
	}
</script>

<style>
	.bold {
		font-weight: bold;
	}

	.custom-IsNew {
		/*background-color: #d2f1f0 !important;*/
		color: #3ea3ff !important;
	}

	.custom-grid-item {
		background-color: #cce6ff !important;
	}

	.weekTitles {
		background-color: #F5F5F5 !important;
	}
</style>